<template>
  <NavBar />
  <van-tabs v-model:active="activeBillboardIndex" class="tabs" color="#ff0000" @click-tab="handleTabClick">
    <van-tab :title="item.name" v-for="item in billboardTypeList" :key="item.id">
      <van-list class="billboard" v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <ul class="billboard-list">
          <li class="billboard-item" v-for="item in activeSortedBillboard" :key="item.id"
            @click="gotoComicCover(item.id)">
            <div class="thumb-info">
              <div class="thumb">
                <img :src="getProxyImageUrl(item.pic)" :alt="item.title" />
              </div>
              <div class="info line-ellipsis">
                <div class="title-lastChapter">
                  <div class="title line-ellipsis">{{ item.title }}</div>
                  <div class="lastChapter line-ellipsis">更新至{{ item.lastchapter }}</div>
                </div>
                <div class="author-tag">
                  <div class="author line-ellipsis">{{ item.author }}</div>
                  <div class="tag line-ellipsis">
                    <van-tag plain round v-for="(tag, index) in formatTag(item.tag)" :key="index">{{
                      tag
                    }}</van-tag>
                  </div>
                </div>
              </div>
            </div>
            <div class="rank">
              <template v-if="item.topnumber <= 3">
                <svg class="icon" aria-hidden="true" v-if="item.topnumber === 1">
                  <use xlink:href="#icon-diyiming"></use>
                </svg>
                <svg class="icon" aria-hidden="true" v-if="item.topnumber === 2">
                  <use xlink:href="#icon-dierming"></use>
                </svg>
                <svg class="icon" aria-hidden="true" v-if="item.topnumber === 3">
                  <use xlink:href="#icon-disanming"></use>
                </svg>
              </template>
              <template v-else>
                {{ item.topnumber }}
              </template>
            </div>
          </li>
        </ul>
      </van-list>
    </van-tab>
  </van-tabs>
</template>
<script setup>
import "@/assets/iconfont.js";
import { getProxyImageUrl } from "@/util/index.js"
import { getAllTopLists, getTopListComics } from "@/api/index.js";
import NavBar from "@/components/common/NavBar.vue";
import { ref, onMounted, computed, watch } from "vue";

import { useRouter } from "vue-router";
const router = useRouter();


const billboardTypeList = ref([]);
const activeBillboardIndex = ref(0);
const activeBillboard = ref([]);
const activeBillboardId = computed(() => billboardTypeList.value[activeBillboardIndex.value].id);
const loading = ref(false);
const finished = ref(false);
const pageNum = ref(1);
// 对榜单列表项目进行排序
function sortBillboardByTopNumber (billboardList) {
  return billboardList.sort((a, b) => a.topnumber - b.topnumber);
}

const gotoComicCover = (id) => {
  router.push({ path: `/comicCover/${id}` })

}




// 对当前排行榜内容进行排序
const activeSortedBillboard = computed(() => sortBillboardByTopNumber(activeBillboard.value));
onMounted(async () => {
  loading.value = true;
  //获取全部榜单
  const response = await getAllTopLists();
  billboardTypeList.value = response.data;
  //加载默认榜单列表
  const res = await getTopListComics(activeBillboardId.value, pageNum.value);
  activeBillboard.value.push(...res.data);

  loading.value = false;
});

const onLoad = async () => {
  pageNum.value += 1;
  loading.value = true;
  const res = await getTopListComics(activeBillboardId.value, pageNum.value);
  if (res.data.length > 0) {
    activeBillboard.value.push(...res.data);
    loading.value = false;
  } else if (res.data.length === 0) {
    loading.value = false;
    finished.value = true;
    return;
  }
};

watch(activeBillboardIndex, async () => {
  pageNum.value = 1;
  activeBillboard.value = [];
  loading.value = true;
  const res = await getTopListComics(activeBillboardId.value, pageNum.value);
  activeBillboard.value.push(...res.data);
  loading.value = false;
});

function formatTag (str) {
  return str.trim().split(/\s+/);
}

const handleTabClick = ({ name }) => {
  activeBillboardIndex.value = name;
  // getTopListComics()
};
</script>
<style scoped>
.line-ellipsis {
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* iconfont */
.icon {
  width: 2em;
  height: 2em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

.tabs {
  margin-top: 50px;
}

.billboard-list {
  list-style: none;
  padding: 5px 10px 0 10px;
  margin: 0;
}

.billboard-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 0;
}

.thumb-info {
  display: flex;
  justify-content: center;
  align-items: stretch;
  overflow: hidden;
}

.thumb {
  width: 100px;
  height: 150px;
  overflow: hidden;
  margin-right: 10px;
}

.thumb img {
  display: block;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  padding: 5px 0;
}

.title-lastChapter {
  width: 200px;
}

.title {
  color: #666;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.lastChapter {
  color: #999;
  font-size: 14px;
}

.author-tag {
  color: #999;
  font-size: 14px;
}

.tag {
  font-size: 12px;
  margin-top: 10px;
}

:deep(.van-tag) {
  margin-right: 5px;
}


.rank {
  width: 50px;
  /* 设置固定宽度 */
  display: flex;
  /* 使用 Flexbox 布局 */
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中（如果需要） */
  font-size: 16px;
  color: #666;
}
</style>
